<template>
    <div class="showEcharts" :style="{ width: width, height: height }" ref="showEchartsEle">
    </div>
</template>

<script  lang="ts" setup>
import { withDefaults, onMounted, ref, defineProps, watchEffect } from 'vue'
// 可以支持ts语法
import useEcharts from '@/hooks/useEcharts';

interface Props {
    width?: string,
    height?: string,
    options: any
}
// defineProps:接受父组件传递的数据
// withDefaults 帮助程序为默认值提供类型检查，并确保返回的 props 类型
const props = withDefaults(defineProps<Props>(), {
    width: '100%',
    height: '300px',
})
// DOM元素
const showEchartsEle = ref<HTMLElement>();
// 挂载后设置echarts
onMounted(() => {
    const { setOption, resize } = useEcharts(showEchartsEle.value);
    // 1.设置option数据
    // 直接运行监听函数
    watchEffect(() => {
        setOption(props.options)
    })
    // 2.当容器大小发生改变时,
    window.addEventListener('resize', () => {
        resize();
    })
})

</script>

<style lang="less" scoped>

</style>
